<script setup lang="ts">
import { Modal } from 'ant-design-vue';

function showConfirm() {
  Modal.confirm({
    title: 'Do you want to delete these items?',
    content: 'When clicked the OK button, this dialog will be closed after 1 second',
    class: 'ant-cover__confirm',
    centered: true,
    onOk() {
      return new Promise((resolve, reject) => {
        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
      }).catch(() => console.log('Oops errors!'));
    },
    onCancel() {},
  });
}
</script>

<template>
  <div class="mb-2 items-start gap-3 rounded-xl bg-white/7 p-4">
    <h4 class="mt-0">
      常规的按钮
    </h4>
    <div class="flex flex-wrap gap-3">
      <AButton type="primary">
        普通状态(中)
      </AButton>
      <AButton type="primary" size="small">
        普通状态(中)
      </AButton>
      <AButton type="primary" disabled>
        禁用状态
      </AButton>
      <AButton type="primary" loading>
        加载状态
      </AButton>
    </div>
  </div>

  <div class="mb-2 items-start gap-3 rounded-xl bg-white/7 p-4">
    <h4 class="mt-0">
      带阴影的按钮
    </h4>
    <div class="flex flex-wrap gap-3">
      <AButton class="ant-cover__Button-3d-primary" type="primary" size="large">
        普通状态(大)
      </AButton>
      <AButton class="ant-cover__Button-3d-primary" type="primary">
        普通状态(中)
      </AButton>
      <AButton class="ant-cover__Button-3d-primary" type="primary" size="small">
        普通状态(中)
      </AButton>
      <AButton class="ant-cover__Button-3d-primary" type="primary" disabled>
        禁用状态
      </AButton>
      <AButton class="ant-cover__Button-3d-primary" type="primary" loading>
        加载状态
      </AButton>

      <AButton class="ant-cover__Button-3d-blue" type="primary" size="large">
        普通状态(大)
      </AButton>
      <AButton class="ant-cover__Button-3d-green" type="primary" size="large">
        普通状态(大)
      </AButton>
      <AButton class="ant-cover__Button-3d-gray" type="primary" size="large">
        普通状态(大)
      </AButton>
    </div>
  </div>

  <div class="mb-2 items-start gap-3 rounded-xl bg-white/7 p-4">
    <h4 class="mt-0">
      组件内按钮
    </h4>
    <AButton type="primary" @click="showConfirm()">
      打开确认弹窗
    </AButton>
  </div>

  <div class="items-start gap-3 rounded-xl bg-white/7 p-4">
    <h4 class="mt-0">
      帮助按钮
    </h4>
    <div class="flex text-xl">
      帮帮我 帮帮我 帮帮我 快帮帮我
      <THelptip class="text-red">
        哈哈哈哈哈
      </THelptip>
    </div>
  </div>
</template>

<style lang="scss">
:root {
  background-color: #1d1e24;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}
</style>
